<template>
  <a-modal
    :visible="visible"
    :title="formData.roleId ? '编辑角色' : '新增角色'"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
    width="600px"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="角色名称" name="roleName">
        <a-input v-model:value="form.roleName" placeholder="请输入角色名称" />
      </a-form-item>
      
      <a-form-item label="角色标识" name="roleKey">
        <a-input v-model:value="form.roleKey" placeholder="请输入角色标识" />
      </a-form-item>
      
      <a-form-item label="排序" name="roleSort">
        <a-input-number v-model:value="form.roleSort" placeholder="请输入排序号" style="width: 100%" />
      </a-form-item>
      
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="form.remark" placeholder="请输入备注" :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import * as roleApi from '@/api/role'
import type { SysRole } from '@/types/role'

const props = defineProps<{
  visible: boolean
  formData: Partial<SysRole>
}>()

const emit = defineEmits(['update:visible', 'success'])

// 表单ref
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive<any>({
  roleId: undefined,
  roleName: '',
  roleKey: '',
  roleSort: 0,
  status: 1, // 默认正常状态
  remark: ''
})

// 表单校验规则
const rules = {
  roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
  roleKey: [{ required: true, message: '请输入角色标识', trigger: 'blur' }],
  roleSort: [{ required: false, message: '请输入排序号', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 加载状态
const confirmLoading = ref(false)

// 监听表单数据变化
watch(
  () => props.formData,
  (val) => {
    if (val) {
      // 重置表单
      formRef.value?.resetFields()
      
      // 填充表单数据
      Object.keys(form).forEach(key => {
        if (key in val) {
          // @ts-ignore
          form[key] = val[key]
        }
      })
    }
  },
  { immediate: true, deep: true }
)

// 取消
const handleCancel = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
}

// 确定
const handleOk = async () => {
  try {
    // 表单验证
    await formRef.value?.validate()
    
    confirmLoading.value = true
    
    // 构建请求数据
    const data = { ...form }
    
    // 调用API
    if (props.formData.roleId) {
      await roleApi.updateRole(data)
    } else {
      await roleApi.addRole(data)
    }
    
    message.success(props.formData.roleId ? '修改成功' : '新增成功')
    
    // 关闭对话框并通知父组件刷新
    emit('update:visible', false)
    emit('success')
  } catch (error) {
    console.error('提交表单失败:', error)
  } finally {
    confirmLoading.value = false
  }
}
</script>
